<template>
  <footer class="ui inverted vertical segment m-padded-tb-massive">
    <div class="ui center aligned container">
      <div class="ui inverted divided stackable grid">
        <div class="four wide column">
          <div class="ui inverted link list">
            <div class="item">
              <img :src="listContact.wechatCode" class="ui rounded image" alt style="width: 110px" />
            </div>
          </div>
        </div>
        <div class="four wide column">
          <h4 class="ui inverted header m-text-thin m-text-spaced">其他项目</h4>
          <div class="ui inverted link list">
            <a
              v-for="(item,index) in listLink"
              :key="'listLink'+index"
              :href="item.link"
              class="item m-text-thin"
              arget="_blank"
            >{{item.name}}</a>
          </div>
        </div>
        <div class="four wide column">
          <h4 class="ui inverted header m-text-thin m-text-spaced">联系小陈</h4>
          <div class="ui inverted link list">
            <a class="item m-text-thin">{{listContact.email}}</a>
            <a class="item m-text-thin">{{'QQ：'+listContact.qq}}</a>
            <a class="item m-text-thin">{{'WeChat：'+listContact.wechat}}</a>
          </div>
        </div>
        <div class="four wide column">
          <br />
          <br />
          <p class="m-text-thin m-text-spaced m-opacity-mini">先做人，后做事</p>
        </div>
      </div>
      <div class="ui inverted section divider"></div>
      <p
        class="m-text-thin m-text-spaced m-opacity-tiny"
      >By 小陈的程序人生</p>
    </div>
  </footer>
</template>

<script>
export default {
  name: "Footer",
  components: {},
  data() {
    return {
      listContact: [],
      listLink: [],
    };
  },
  mounted() {
    $.get({
      url: "contacts",
      success: (res) => {
        this.listContact = res[0];
      },
    });
    $.get({
      url: "links",
      success: (res) => {
        this.listLink = res;
      },
    });
  },
  computed: {},
  methods: {},
};
</script>

<style scoped>
</style>